import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/testJS",
    name: "TestJS",
    component: () =>
      import(/* webpackChunkName: "TestJS" */ "../views/TestJS.vue"),
  },
  {
    path: "/testSetup",
    name: "TestSetup",
    component: () =>
      import(/* webpackChunkName: "TestSetup" */ "../views/TestSetup.vue"),
  },
  {
    path: "/testScriptSetup",
    name: "TestScriptSetup",
    component: () =>
      import(
        /* webpackChunkName: "TestScriptSetup" */ "../views/TestScriptSetup.vue"
      ),
  },
  {
    path: "/testUI",
    name: "TestUI",
    component: () =>
      import(/* webpackChunkName: "TestUI" */ "../views/TestUI.vue"),
  },
  {
    path: "/testVuex",
    name: "TestVuex",
    component: () =>
      import(/* webpackChunkName: "TestVuex" */ "../views/TestVuex.vue"),
  },
  {
    path: "/testRequest",
    name: "TestRequest",
    component: () =>
      import(/* webpackChunkName: "TestRequest" */ "../views/TestRequest.vue"),
  },
  {
    path: "/testJest",
    name: "TestJest",
    component: () =>
      import(/* webpackChunkName: "TestJest" */ "../views/TestJest.vue"),
  },
  {
    path: "/testLanguage",
    name: "TestLanguage",
    component: () =>
      import(
        /* webpackChunkName: "TestLanguage" */ "../views/TestLanguage.vue"
      ),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

/*
 * to 要跳转到哪里
 * from 从哪里跳转来
 * next 是一个方法，可以传入下一个跳转路由的路径，如果不传参数，代表直接跳转到to这个路由
 */
router.beforeEach((to, from, next) => {
  //进行判断，如果to路径没有匹配到现有的任何一个路由
  //作用：当to的路由为空时不跳转，同时当from的路由也为空时，则跳转到404页面
  // if (to.matched.length === 0) {
  //   //这里打印输出
  //   console.log(to, from, next);

  //   //这里用三元表达式进行了判断，当from.name也就是跳转来的路由名称不为空，则直接跳转到from所代表的路由，否则跳转到404页面
  //   from.name ? next({ name: from.name }) : next("/404");
  // } else {
  //   //如果to的路由名称不为空，则进行跳转
  //   next();
  // }
  console.log(to, from, next);
  next();
});

export default router;
